<template>
  <div class="code-box">
    <h3 class="code-box-title">3、roRaw和markRaw的使用</h3>
    <p>a、使用场景，就是需要将响应式数据交给外部使用，比如axios使用的时候，可以使用toRaw方法来返回一个原始数据</p>
    <p>b、markRaw方法将数据永远彻底的标记为原始数据，使其不具有响应式，比如用来包装mockjs的数据。</p>

    <p>{{ }}</p>
    <button class="btn" @click="handleClick">changeHandleToRaw</button>
    <p>{{ carReactive }}</p>
    <button class="btn" @click="handleMarkRawClick">changeHandleMarkRaw</button>

  </div>
</template>

<script lang='ts' setup>
import { ref, toRaw, reactive, markRaw } from 'vue';
const name = ref('张三');
const person = reactive({
  name: '李四',
  age: 20,
  location: {
    city: '北京',
    x: 10,
    y: 20
  }
});
// 1、toRaw方法将响应式数据转为原始数据
const rowName = toRaw(name);
console.log(rowName, name.value);

const rowPerson = toRaw(person);
console.log(rowPerson, person);

function handleClick() {

}


//2、markRaw方法将数据永远彻底的标记为原始数据，使其不具有响应式
const car = {
  brand: '宝马',
  model: 'X5',
  year: 2021
}
const markCar = markRaw(car);
const carReactive = reactive(car);
console.log(markCar);


function handleMarkRawClick() {
  carReactive.year++ //这里的sum 不会触发更新
}

</script>

<style scoped lang='scss'>
.code-box {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  min-height: 50px;

  &-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.btn.active {
  background-color: #f0a80d;
  color: #fff;
}
</style>
